<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Kiss OS Utils</title>
        <meta http-equiv="Content-Language" content="en" />
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta name="Steelsquid Kiss OS" content="Controll a rover from the web." />
        <meta name="keywords" content="steelsquid, steelsquid-kiss-os, raspberry, pi, debian, linux, distribution, administrator, configure" />
        <meta name="author" content="Andreas Nilsson (Steelsquid)" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="steelsquid.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="steelsquid.js"></script>     
        <script type="text/javascript">
            //<![CDATA[ 
            /**
             * When the page is loaded
             */
            function onPageLoad(){
                showLayer('main');
            }
            
            /**
             * When go back or middle mouse button or esc pressed
             */
            function onBack(){
                showLayer('main');
            }
            
            /**
             * This will execute every 10 second
             */
            function onEvery05s(){
                if (isLayerShowing('stream') || isLayerShowing('rover')){
                    $("#stream_img").attr("src", "http://"+window.location.hostname+":8080/?action=stream");         
                }
            }

            /**
             * This will execute every 30 second
             */
            function onEvery30s(){
                if (isLayerShowing('rover')){
                    submitNoPW('rover_info');
                }
            }

            /**
             * When a layer is shown
             */
            function onLayerShown(layer){
                if(layer == "stream"){
                    submitNoPW('stream');
                }
                if(layer == "rover"){
                    submitNoPW('rover_info');
                    $("#rover_img").attr("src", "http://"+window.location.hostname+":8080/?action=stream");       
                }
            }           

            /**
             * On stream
             */
            function on_stream(paramaters){
                if(paramaters[0] == "True"){
                    show('stream_enabled');
                    hide('stream_disabled');
                    $("#stream_img").attr("src", "http://"+window.location.hostname+":8080/?action=stream");         
                    $("#video_link").attr("href", "http://"+window.location.hostname+":8080/?action=stream");         
                    $("#video_link").html("http://"+window.location.hostname+":8080/?action=stream");
                }
                else{
                    hide('stream_enabled');
                    show('stream_disabled');
                }
            }
            
            /**
             * On rover
             */
            function on_rover_info(paramaters){
                if(paramaters[0] == "True"){
                    show('rover_enabled');
                    hide('rover_disabled');
                    $("#rover_voltage").html(paramaters[1]);
                    if(paramaters[2] == "True"){
                        $("#rover_light").html("Enabled");
                    }
                    else{
                        $("#rover_light").html("Disabled");
                    }
                    if(paramaters[3] == "True"){
                        $("#rover_alarm").html("Enabled");
                    }
                    else{
                        $("#rover_alarm").html("Disabled");
                    }
                }
                else{
                    hide('rover_enabled');
                    show('rover_disabled');
                }
            }

            /**
             * On rover
             */
            function on_rover_light(paramaters){
                if(paramaters[0] == "True"){
                    $("#rover_light").html("Enabled");
                }
                else{
                    $("#rover_light").html("Disabled");
                }
            }

            /**
             * On rover
             */
            function on_rover_alarm(paramaters){
                if(paramaters[0] == "True"){
                    $("#rover_alarm").html("Enabled");
                }
                else{
                    $("#rover_alarm").html("Disabled");
                }
            }
            
            /**
             * On rover
             */
            function on_rover_enable(paramaters){
                on_rover(paramaters);
            }
            
            /**
             * On rover
             */
            function on_rover_disable(paramaters){
                on_rover(paramaters);
            }
            
            //]]>
        </script>
        
    </head>
    <body>
        <table class="bar">
            <thead>
                <tr>
                    <td>
                        <img alt="logo" src="img/bar_steelsquid.png"></img>
                    </td>
                    <td>
                        Kiss OS Utils
                    </td>
                    <td>
                        <img alt="logo" src="img/bar_menu.png"></img>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr onclick="javascript:window.location = 'http://www.steelsquid.org/steelsquid-kiss-os';">
                    <td>
                        <img alt="logo" src="img/bar_help.png"></img>
                    </td>
                    <td colspan="2" >
                        Help
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/';">
                    <td>
                        <img alt="logo" src="img/bar_admin.png"></img>
                    </td>
                    <td colspan="2" >
                        Administrator
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/download';">
                    <td>
                        <img alt="logo" src="img/bar_download.png"></img>
                    </td>
                    <td colspan="2" >
                        Download Manager
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/play';">
                    <td>
                        <img alt="logo" src="img/bar_play.png"></img>
                    </td>
                    <td colspan="2" >
                        Media Player
                    </td>
                </tr>
                <tr onclick="javascript:submitSyncConfirm('Are you sure you want to reboot?', 'reboot');">
                    <td>
                        <img alt="logo" src="img/bar_reboot.png"></img>
                    </td>
                    <td colspan="2" >
                        Reboot
                    </td>
                </tr>
                <tr onclick="javascript:submitSyncConfirm('Are you sure you want to shutdown?', 'shutdown');">
                    <td>
                        <img alt="logo" src="img/bar_shutdown.png"></img>
                    </td>
                    <td colspan="2" >
                        Shutdown
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="flow">
            <div class="layer" id="main">
                <table class="menu">
                    <tbody>
                        <tr onclick="javascript:showLayer('stream');">
                            <td>
                                <img alt="logo" src="img/camera.png"></img>
                            </td>
                            <td>
                                Camera streaming
                            </td>
                        </tr>
                        <tr onclick="javascript:showLayer('rover');">
                            <td>
                                <img alt="logo" src="img/rover.png"></img>
                            </td>
                            <td>
                                Rover Controller
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--####################################################################################################-->
            <div class="layer" id="stream">
                <table class="sheader">
                    <tr onclick="javascript:onBack();">
                        <th>
                            <img alt="logo" src="img/camera.png"></img>
                        </th>
                        <th>Camera streaming</th>
                    </tr>
                </table>
                <div id="stream_disabled" class="hide">
                    The USB web camera streaming is not enabled on this system.<br/>
                    Enable streaming may take a minute to perform and you need to reload this page afterwards (you may get connection error).<br/>
                    <br/>
                    <table>
                        <tr>
                            <td><button onclick="javascript:submitSyncConfirm('Are you sure you want to disable the streaming?', 'stream', 'True');">Enable Streaming</button></td>
                        </tr>
                    </table>
                </div>
                <div id="stream_enabled" class="hide">
                    The USB web camera streaming is enabled on this system.<br/>
                    Below you should see the video from the USB camera.<br/>
                    If not, is it probably because your camera is not supported.<br/>
                    This is the url to the video: <a id="video_link" href=""></a><br>
                    <br/>
                    <img alt="The stream" id="stream_img" src=""/>
                    <br/>
                    <table style="width:100%">
                        <tr>
                            <td style="width:50%"><button id="but_normal" style="text-decoration: underline;" onclick="javascript:$('#stream_img').removeClass('rotate-180');$('#but_normal').css({'text-decoration':'underline'});;$('#but_flip').css({'text-decoration':'none'});">Camera normal</button></td>
                            <td style="width:50%"><button id="but_flip" onclick="javascript:$('#stream_img').removeClass('rotate-180').addClass('rotate-180');$('#but_normal').css({'text-decoration':'none'});;$('#but_flip').css({'text-decoration':'underline'});">Camera rotate</button></td>
                        </tr>
                    </table>
                    <br/><br/>
                    Disable streaming may take a minute to perform and you need to reload this page afterwards (you may get connection error).<br/>
                    <table>
                        <tr>
                            <td><button onclick="javascript:submitSyncConfirm('Are you sure you want to disable the streaming?', 'stream', 'False');">Disable Streaming</button></td>
                        </tr>
                    </table>
                </div>
                <br />
                <table class="footer">
                    <tr onclick="javascript:onBack();">
                        <td>
                            <img alt="logo" src="img/back.png"></img>
                        </td>
                        <td>
                            Back to main menu
                        </td>
                    </tr>
                </table>
            </div>
            <!--####################################################################################################-->
            <div class="layer" id="rover">
                <table class="sheader">
                    <tr onclick="javascript:onBack();">
                        <th>
                            <img alt="logo" src="img/rover.png"></img>
                        </th>
                        <th>Rover Controller</th>
                    </tr>
                </table>
                <div id="rover_disabled" class="hide">
                    The Rover Controller is not enabled on this system.<br/>
                    Enable Rover Controller may take a minute to perform and you need to reload this page afterwards (you may get connection error).<br/>
                    <br/>
                    <table>
                        <tr>
                            <td><button onclick="javascript:submitSyncFromPrompt('rover_enable', 'Please enter password for the user root?', '');">Enable Rover Controller</button></td>
                        </tr>
                    </table>
                </div>
                <div id="rover_enabled" class="hide">
                    The Rover Controller is enabled on this system.
                    <br/><br/>
                    <table class="keyvalue">
                        <tr>
                            <td>Battery voltage:</td><td id="rover_voltage">---</td>
                        <tr>
                        </tr>
                            <td>Light:</td><td id="rover_light">---</td>
                        <tr>
                        </tr>
                            <td>Alarm:</td><td id="rover_alarm">---</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td style="width:50%"><button id="rov_normal" onclick="javascript:$('#rover_img').removeClass('rotate-180');$('#rov_normal').css({'text-decoration':'underline'});;$('#rov_flip').css({'text-decoration':'none'});">Cam norm</button></td>
                            <td style="width:50%"><button id="rov_flip" style="text-decoration: underline;" onclick="javascript:$('#rover_img').removeClass('rotate-180').addClass('rotate-180');$('#rov_normal').css({'text-decoration':'none'});;$('#rov_flip').css({'text-decoration':'underline'});">Came rotate</button></td>
                        </tr>
                    </table>
                    <br/>
                    Below you should see the video from the USB camera.
                    <br/>
                    <img alt="The stream" id="rover_img" src="" class="rotate-180"/>
                    <br/><br/>
                    <table style="width:100%">
                        <tr>
                            <td style="width:33%"><button onclick="javascript:submitAsync('rover_tilt', 'True');">Tilt up</button></td>
                            <td style="width:33%"><button style="font-weight:bold" onclick="javascript:submitAsync('rover_forward');">Forward</button></td>
                            <td style="width:33%"><button onclick="javascript:submitSync('rover_light');">Toggle light</button></td>
                        </tr>
                        <tr>
                            <td style="width:33%"><button style="font-weight:bold" onclick="javascript:submitAsync('rover_left');">Left</button></td>
                            <td style="width:33%"><button style="font-weight:bold" onclick="javascript:submitAsync('rover_stop');">Stop</button></td>
                            <td style="width:33%"><button style="font-weight:bold" onclick="javascript:submitAsync('rover_right');">Right</button></td>
                        </tr>
                        <tr>
                            <td style="width:33%"><button onclick="javascript:submitAsync('rover_tilt', 'false');">Tilt down</button></td>
                            <td style="width:33%"><button style="font-weight:bold" onclick="javascript:submitAsync('rover_backward');">Backward</button></td>
                            <td style="width:33%"><button onclick="javascript:submitSync('rover_alarm');">Toggle alarm</button></td>
                        </tr>
                    </table>
                    <br/><br/>
                    Disable Rover Controller may take a minute to perform and you need to reload this page afterwards (you may get connection error).<br/>
                    <table>
                        <tr>
                            <td><button onclick="javascript:submitSyncFromPrompt('rover_disable', 'Please enter password for the user root?', '');">Disable Rover Controller</button></td>
                        </tr>
                    </table>
                </div>
                <br />
                <table class="footer">
                    <tr onclick="javascript:onBack();">
                        <td>
                            <img alt="logo" src="img/back.png"></img>
                        </td>
                        <td>
                            Back to main menu
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>
